<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Thymeleaf tutorial - Exercise 14: fragments</title>
        <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
        <meta charset="utf-8" />
    </head>
    <body>
        <p>
            This exercise introduces concepts from
            <a href="http://www.thymeleaf.org/doc/html/Using-Thymeleaf.html#template-layout"
               title="Open Thymeleaf manual" target="_blank">chapter 8 of the Using Thymeleaf</a>
            manual.
        </p>
        <ol>
            <li>
                Open the <a href="../../templates/exercise14/answer1.html" 
                  th:href="@{/resources/templates/exercise14/answer1.html}"><kbd>answer1.html</kbd></a>, 
                  <a href="../../templates/exercise14/answer2.html" 
                  th:href="@{/resources/templates/exercise14/answer2.html}"><kbd>answer2.html</kbd></a> and 
                  <a href="../../templates/exercise14/answer3.html" 
                  th:href="@{/resources/templates/exercise14/answer3.html}"><kbd>answer3.html</kbd></a> template files 
				  from the <kbd>WEB-INF/templates/exercise14/</kbd> folder with your code editor.
            </li>
            <li>
                Set <kbd>/logo.png</kbd> as the source for the <kbd>img</kbd> logo element.
            </li>
            <li>
                Turn the <kbd>div</kbd> element in <kbd>answer1.html</kbd> into a fragment by using
                <kbd>th:fragment</kbd>, and include it into the other templates just below the
                <i>Product List</i> header. Do this in two different ways:
                <ul>
                  <li>Into <kbd>answer2.html</kbd>, using its fragment name (standard Thymeleaf-to-Thymeleaf) inclusion
                      mechanism</li>
                  <li>Into <kbd>answer3.html</kbd>, using the DOM selector expression <kbd>//div[@id='bannerElement']</kbd>.</li>  
                </ul>
                When specifying your template inclusions, remember that template roots must start 
                with <kbd>/exercise14</kbd>, like "<kbd>/exercise14/answer1.html</kbd>".
            </li>
            <li>
                Check your answer:
                <ul>
                  <li><kbd>answer1.html</kbd>: 
                      <a href="answer1.html" th:href="@{/templates/exercise14/answer.html(page=1)}">Execute it</a> |
                      <a href="answer1.html" th:href="@{/static/templates/exercise14/answer1.html}">See it statically</a>.</li>
                  <li><kbd>answer2.html</kbd>: 
                      <a href="answer2.html" th:href="@{/templates/exercise14/answer.html(page=2)}">Execute it</a> |
                      <a href="answer2.html" th:href="@{/static/templates/exercise14/answer2.html}">See it statically</a>.</li>
                  <li><kbd>answer3.html</kbd>: 
                      <a href="answer3.html" th:href="@{/templates/exercise14/answer.html(page=3)}">Execute it</a> |
                      <a href="answer3.html" th:href="@{/static/templates/exercise14/answer3.html}">See it statically</a>.</li>
                </ul> 
            </li>
            <li>
                Finally, you can compare your answer with our proposed solution:
                <ul>
                  <li><kbd>solution1.html</kbd>: 
                      <a href="solution1.html" th:href="@{/templates/exercise14/solution.html(page=1)}">Execute it</a> |
                      <a href="solution1.html" th:href="@{/resources/templates/exercise14/solution1.html}">See the code</a> |
                      <a href="solution1.html" th:href="@{/static/templates/exercise14/solution1.html}">See it statically</a>.</li>
                  <li><kbd>solution2.html</kbd>: 
                      <a href="solution2.html" th:href="@{/templates/exercise14/solution.html(page=2)}">Execute it</a> |
                      <a href="solution2.html" th:href="@{/resources/templates/exercise14/solution2.html}">See the code</a> |
                      <a href="solution2.html" th:href="@{/static/templates/exercise14/solution2.html}">See it statically</a>.</li>
                  <li><kbd>solution3.html</kbd>: 
                      <a href="solution3.html" th:href="@{/templates/exercise14/solution.html(page=3)}">Execute it</a> |
                      <a href="solution3.html" th:href="@{/resources/templates/exercise14/solution3.html}">See the code</a> |
                      <a href="solution3.html" th:href="@{/static/templates/exercise14/solution3.html}">See it statically</a>.</li>
                </ul>
            </li>
            <li>
                You can check the proposed solution by pressing the <b>Show solution</b> button.
            </li>
        </ol>
    </body>
</html>
